import { Button, Cascader, DatePicker, Form, Input, InputNumber, Modal, Radio, Select, Switch, TreeSelect, Upload } from 'antd';
import TextArea from 'antd/lib/input/TextArea';
import React, { useState } from 'react';
import '../Dialog/index.css'

import { PlusOutlined } from '@ant-design/icons';

const { Option } = Select;

// 声明类型
type Iprops = {
    visible: boolean;
    onOk: any;
    onCancel: any;
}
const AddPicture = (props: Iprops) => {
    let { visible } = props
    const [open, setOpen] = useState(false);
    const [confirmLoading, setConfirmLoading] = useState(false);

    const showModal = () => {
        setOpen(true);
    };

    const handleOk = () => {
        setConfirmLoading(true);
        setTimeout(() => {
            setOpen(false);
            setConfirmLoading(false);
        }, 2000);
    };

    const handleCancel = () => {
        console.log('Clicked cancel button');
        setOpen(false);
    };

    const onChange = (value: string) => {
        console.log(`selected ${value}`);
    };
    const onSearch = (value: string) => {
        console.log('search:', value);
    };

    return (
        <Modal title="添加广告" open={visible} cancelText='取消' okText='确定' onOk={() => {
            props.onOk()
        }} onCancel={() => {
            props.onCancel()
        }}
            confirmLoading={confirmLoading}
        >
            <Form
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 14 }}
                layout="horizontal"
            >
                <Form.Item label="所属分类">
                    <Select placeholder='请选择'>
                        <Select.Option value="demo">Demo</Select.Option>
                    </Select>
                </Form.Item>
                <Form.Item label="产品编号">
                    <Input style={{width:50}}/><span style={{color:'#000'}}> x </span><Input style={{width:50}}/>
                </Form.Item>
                <Form.Item label="显示排序">
                    <Input placeholder='从大到小排序'/>
                </Form.Item>
                <Form.Item label="是否显示状态">
                    <Radio.Group>
                        <Radio value="apple"> 显示 </Radio>
                        <Radio value="pear"> 隐藏 </Radio>
                    </Radio.Group>
                </Form.Item>
                <Form.Item label="广告图片" valuePropName="fileList">
                    <Upload action="/upload.do" listType="picture-card">
                        <div>
                            <PlusOutlined />
                            <div style={{ marginTop: 8 }}>上传图片</div>
                        </div>
                    </Upload>
                </Form.Item>
                <Form.Item>
                    <span style={{color:'#000'}}>120px*60px ,小于5MB,支持jpg、gif、png、jpeg的文件类型</span>
                </Form.Item>
            </Form>
        </Modal >
    );
};

export default AddPicture;